import {
  is_closeModal,
  options,
  posterUrlModule,
  uniClass,
  visible,
} from "./store";
import { onCanplay, onPause, onPlay, onTimeupdate } from "./utils";
import styles from "./index.module.less";
export const modalConfig = () => {
  const defineModal = {
    zIndex: 1002,
    modalClass: uniClass,
    modalInstance: ref(null),
    loading: ref(false),
    visible,
    maskClosable: true,
    title: ref($t("base.videoPlayer")),
    okText: $t("base.ok"),
    formState: reactive({}),
    on: {
      finish: () => (is_closeModal.value = true),
    },
    slot: {
      extra_form_item: () => {
        let wrapper = styles.wrapper;
        let videoBackground: any = styles["video-background"];
        let videoBox = styles["video-box"];
        return (
          <>
            <div class={wrapper}>
              <canvas
                class={videoBackground}
                style={` background-image: url(${posterUrlModule.value})`}
              ></canvas>
              <div class={[videoBox]}>
                <vue3-video-play
                  {...options}
                  playsinline={true}
                  onPlay={onPlay.bind(this)}
                  onPause={onPause.bind(this)}
                  onTimeupdate={onTimeupdate.bind(this)}
                  onCanplay={onCanplay.bind(this)}
                />
              </div>
            </div>
          </>
        );
      },
    },
  };
  return defineModal;
};
